<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1160px;
            background-color: burlywood;
            /* 
                1. 必须是块级标签
                2. 必须设置了宽度
            */
            margin: 0 auto;


            /* 弹性盒子相关属性（作用在子标签身上，只有儿子，没有孙子） */
            display: flex;
            /* 让儿子一左一右 */
            justify-content: space-between;
        }

        .left-comment {
            width: 945px;
            height: 100%;
            background-color: aquamarine;
        }

        .comment-title {
            height: 40px;
            background-color: greenyellow;
        }

        /* 每一个评论 */
        .comment-item {
            border: 1px solid;
            /* 后续需要删除 */
            /* height: 150px; */
            padding: 10px 0;
            /* 弹性盒子（作用在儿子身上） */
            display: flex;
        }

        .avatar {
            width: 40px;
            background-color: coral;
            /* 让弹性盒子内部的子标签不被压缩 */
            flex-shrink: 0;
        }

        .comment-content {
            background-color: cornflowerblue;
        }

        .comment-image {
            height: 40px;
            width: 500px;
            background-color: hotpink;
        }


        .right-like {
            width: 200px;
            height: 100%;
            background-color: blue;
        }

        .like-title {
            height: 40px;
            background-color: red;
        }

        .like-good {
            width: 160px;
            height: 318px;
            background-color: rgb(13, 15, 11);
            margin: 20px;
        }
    </style>
</head>

<body>

    <div class="container">
        <!-- 左 -->
        <div class="left-comment">
            <div class="comment-title"></div>
            <!-- 评论列表 -->
            <div class="comment-item">
                <!-- 左边头像 -->
                <div class="avatar"></div>
                <!-- 右边评论内容 -->
                <div class="comment-content">
                    <span>么***周</span>
                    <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分
                    </p>
                    <div class="comment-image"></div>
                    <p>
                        <span>2016年12月27日08:31</span>
                        <span>颜色分类：大中小三件套（不含花）</span>
                    </p>
                </div>
            </div>
            <div class="comment-item">
                <!-- 左边头像 -->
                <div class="avatar"></div>
                <!-- 右边评论内容 -->
                <div class="comment-content">
                    <span>么***周</span>
                    <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分
                    </p>
                    <div class="comment-image"></div>
                    <p>
                        <span>2016年12月27日08:31</span>
                        <span>颜色分类：大中小三件套（不含花）</span>
                    </p>
                </div>
            </div>
            <div class="comment-item">
                <!-- 左边头像 -->
                <div class="avatar"></div>
                <!-- 右边评论内容 -->
                <div class="comment-content">
                    <span>么***周</span>
                    <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分
                    </p>
                    <div class="comment-image"></div>
                    <p>
                        <span>2016年12月27日08:31</span>
                        <span>颜色分类：大中小三件套（不含花）</span>
                    </p>
                </div>
            </div>
            <div class="comment-item">
                <!-- 左边头像 -->
                <div class="avatar"></div>
                <!-- 右边评论内容 -->
                <div class="comment-content">
                    <span>么***周</span>
                    <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分
                    </p>
                    <div class="comment-image"></div>
                    <p>
                        <span>2016年12月27日08:31</span>
                        <span>颜色分类：大中小三件套（不含花）</span>
                    </p>
                </div>
            </div>

        </div>

        <!-- 右 -->
        <div class="right-like">
            <!-- 猜你喜欢的标题 -->
            <div class="like-title"></div>


            <!-- 商品列表 -->
            <div class="like-good"></div>
            <div class="like-good"></div>
            <div class="like-good"></div>
            <div class="like-good"></div>

        </div>

    </div>



</body>

</html>